<template>
  <view class="headerBar" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
    <view
      class="headerTitle"
      :style="{
        height: menuButtonInfo.bottom - menuButtonInfo.top + 'px',
        lineHeight: menuButtonInfo.bottom - menuButtonInfo.top + 'px',
        width: '100%',
      }"
    >
      <view
        class="back"
        :style="{ height: menuButtonInfo.bottom - menuButtonInfo.top + 'px' }"
        @click="handleBack"
      >
        <uni-icons type="back" size="20" color="rgba(0,0,0,0.8)"></uni-icons>
      </view>
      <view class="title">{{ title }} </view>
    </view>
  </view>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  export default defineComponent({
    name: 'HeaderBar',
    props: {
      title: {
        type: String,
        deatfault: '',
      },
      isBack: {
        type: Boolean,
        default: true,
      },
    },
    setup(props) {
      const navStyle: any = {};

      // 胶囊信息
      const menuButtonInfo: any = uni.getMenuButtonBoundingClientRect();
      // 系统信息
      uni.getSystemInfo({
        success: (res: any) => {
          navStyle.value = res;
          console.log(res);
        },
      });

      onMounted(async () => {
        // 状态栏高度
        const statusBarHeight = navStyle.value.statusBarHeight;
        // 导航栏高度
        const navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
        // 胶囊高度
        const tabBarHeight = menuButtonInfo.height;
        console.log(navHeight);
        console.log(tabBarHeight);
      });
      function handleBack() {
        uni.navigateBack();
      }
      return {
        handleBack,
        navStyle,
        menuButtonInfo,
      };
    },
  });
</script>
<style lang="scss" scoped>
  .headerBar {
    position: relative;
    width: 100%;
  }
  .headerTitle {
    display: flex;
  }
  .back {
    width: 50px;
    text-align: center;
  }
  .title {
    width: 100%;
    text-align: center;
    margin-left: -50px;
  }
</style>
